<style scoped lang="scss">
    .templateList {
        padding: 10px;
        
        &.isPage {
            padding: 0px;
        }
    }
</style>
<template>
    <div style="padding: 10px;" :class="{isPage:this.$props.isPage}">
        <section style="display: flex;">
            <leftTree style="margin-right: 5px;"
                      code="generate_template"
                      @nodeClick="nodeData=>{
                  this.queryParams.classId=nodeData&&nodeData.id;
                   this.queryParams._className=nodeData&&nodeData.name;
                   this.queryParams.pageNum=1;
                   getInfoList();
        }"
            ></leftTree>
            <div style="flex:1;">
                <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                         @submit.native.prevent>
                    <el-form-item label="名称" desc="名称" prop="name">
                        <el-input v-model.trim="queryParams.name" placeholder="名称" clearable size="small"
                                  style="width:120px;"
                                  @keyup.enter.native="handleQuery" />
                    </el-form-item>
                  <!--  <el-form-item label="模板内容" desc="模板内容" prop="content">
                        <el-input v-model.trim="queryParams.content" placeholder="模板内容" clearable size="small"
                                  style="width:120px;" @keyup.enter.native="handleQuery" />
                    </el-form-item>-->
                    <el-form-item label="分类id" desc="分类id" prop="classId">
                        <classSelectOne v-model="queryParams.classId" :text="queryParams._className" placeholder="分类id"
                                        clearable size="small" style="width:120px;" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent
                                   @click="handleQuery">
                            搜索
                        </el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5" class="buttonsRow">
                        <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
                        <el-button type="primary" size="small" plain @click="()=>triggerShowDocs()">文档</el-button>
                    </el-col>
                    <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                                   @queryTable="getInfoList"></right-toolbar>
                </el-row>
                <section class="tablecontainer">
                    <el-table border ref="multipleTable" :data="dataList" size="mini" class="tabletop"
                              tooltip-effect="dark"
                              style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                              @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                              :row-class-name="tableRowClassName">
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column label="操作" width="55" align="center">
                            <template slot-scope="scope">
                                <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                                    <div>
                                        <el-button size="mini" type="text" icon="el-icon-edit"
                                                   @click="()=>triggerModify(scope.row)"> 修改
                                        </el-button>
                                        <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                                   @click="()=>openLog(scope.row)">变更日志
                                        </el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete"
                                                   @click="()=>handleDelete(scope.row)">删除
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" type="text">操作</el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="!columnsHidden['name']" label="名称" prop="name" min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.name}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="!columnsHidden['fileSuffix']" label="尾缀" prop="name" min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.fileSuffix}}</div>
                            </template>
                        </el-table-column>
                        
                    <!--    <el-table-column v-if="!columnsHidden['content']" label="模板内容" prop="content"
                                         min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.content}}</div>
                            </template>
                        </el-table-column>-->
                    <!--    <el-table-column v-if="!columnsHidden['classId']" label="分类id" prop="classId"
                                         min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.classId}}</div>
                            </template>
                        </el-table-column>-->
                        <el-table-column label="添加时间/人" prop="add_time/add_user"
                                         v-if="!columnsHidden['add_time/add_user']">
                            <template slot-scope="scope">
                                <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span></template>
                        </el-table-column>
                        <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                         v-if="!columnsHidden['lastEditTime/editUser']">
                            <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                                   :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                                   @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                                   @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
                </section>
            </div>
        </section>
    
    </div>
</template>
<script>  import { formData, formMethod, PageData } from '@/utils/formcommon';
import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
import { default as FormDialog } from '@codegenarate/mydialogplus';
import * as  api from '@/apis/systemplate.api.js';

const dicInner = {
  '___sys_template_id': '编号',
  'sys_template_id': 'sys_template_id',
  '___sys_template_name': '名称',
  'sys_template_name': 'sys_template_name',
  '___sys_template_content': '模板内容',
  'sys_template_content': 'sys_template_content',
  '___sys_template_classId': '分类id',
  'sys_template_classId': 'sys_template_classId',
  '___sys_template_className': '分类名称',
  'sys_template_className': 'sys_template_className',
};
export default {
  name: 'sysTemplatelist',
  data() {
    return {
      api: api,
      dicInner, ...formData,
      queryParams: {
        name: '',
        searchKey: '',
        'id': '',
        'name': '',
        'content': '',
        'classId': '',
        'className': '', ...PageData,
      },
      lists: [],
      selectRows: [],
      classId: '',
      classIdPath: '',
      className: '',
      loading: false,
      isFold: false,
      tableRowClassName({ row, rowIndex }) {
        if (row.rowType == 'total') {
          return 'total-row';
        }
        return '';
      },
    };
  },
  components: {
    svgIcon: () => import('@codegenarate/svg-icon'),
    dicSelect: () => import('@/components/dicselect.vue'),
    dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
    RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    modify: () => import('./modify'),
    leftTree: () => import('@/components/classTree/index.vue'),
  },
  mounted() {
    if (this.$props['immediate']) {
      this.getInfoList();
    }
  },
  filters: { dateFormatYYYYMMDD: dateFormatYYYYMMDD },
  computed: {},
  watch: {},
  props: {
    immediate: {
      type: [Boolean], default() {
        return true;
      },
    },
  },
  methods: {
    ...formMethod,
    /**     * @description:     * @params _data.dataList     * @return     */    initByDialog(_data) {
      this.dataList = _data && _data.dataList || [];
    },
    tableRowClickOnece(row, tableRef, options) {
      var table = this.$refs[tableRef];
      if (options && options.canSelect) {
        var istrue = options.canSelect(row);
        if (!istrue) {
          table && table.toggleRowSelection(row, false);
        }
      }
      table && table.clearSelection();
      table && table.toggleRowSelection(row);
    },
    async triggerShowDocs(){
      //iframe 层
      layer.open({
        type: 2,
        title: '模板文档',
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['300', '450px'],
        content: 'https://juejin.cn/post/7159783834169376798/'
      });
    },
    async triggerModify(row) {
    var self=this;
      var result = await FormDialog({
        width: '888px', title: row && row.id ? '编辑模板' : '新增模板',
        data() {
          return {
          ...row,
            classId:self.queryParams.classId,
            className:self.queryParams._className,
           };
        }, components: { modify: () => import('./modify.vue') },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },
  },
};</script>
